<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>

    <div id="app">
        <!-- 展示这个两组件 -->
        <bro1></bro1>
        <bro2></bro2>
    </div>
</body>
<!-- 定义模板 -->
<!-- 大兄弟模板 -->
<template id="bro1">
    <fieldset>
        <legend>大兄弟</legend>
        <h1>{{msg}}</h1>
        <button @click='send'>点击数据传给小兄弟</button>
    </fieldset>
</template>
<!-- 小兄弟模板 -->
<template id="bro2">
    <fieldset>
        <legend>小兄弟</legend>
        <h1>{{msg}}</h1>
    </fieldset>
</template>
<script>

    const bus = new Vue() //创建bus事件中心
    //  bus事件中心有三个api
     //$on 注册事件
     //$emit 触发事件
     //$off 卸载事件
            // 兄弟组件1
    Vue.component('bro1',{
        template:'#bro1',
        data () {
            return {
                msg:'大碗劳烦'
            }
        },
        methods: {
            send(){ //send方法，实现当点击按钮的时候，通过bus发送一个事件，并且携带一个参数
                bus.$emit('gg',this.msg) 
            }
        }
    })
             // 兄弟组件2
    Vue.component('bro2',{
        template:'#bro2',
        data () {
            return {
                msg:'大碗宽面'
            }
        },
        mounted () {
            //注册事件
            bus.$on('gg',(input)=>{ //接收gg这个事件，并且接受传递过来的参数
                console.log(input);
                this.msg = input
                //在完成上面的逻辑后，我们可以卸载掉这个bus事件
                bus.$off('gg')
            })
        }
    })
    const app = new Vue({
        el:'#app',
        data:{
            food:'西瓜',
        },
    })
</script>
</html>